<template>
	<view class="content">
		<view :animation="animBack" class="tabbar_boo" style="">
			<view :animation="animInput" class="img-style" @click="navtoPublish(1)">
				<!-- 	<image src="/static/zp.png" style="width:100%;height:100%;"></image> -->
				<view
					style="background-color: #1a79ff; border-radius: 50%; width: 140upx; height: 140upx; color: #FFFFFF; display: flex; justify-content: center; align-items: center; box-shadow: 2px 2px 8px 2px #ccc;">
					我要求职</view>

				<!-- <view style="text-align:center;margin-top:-10px;font-size:12px;color:#00C900;">发图文</view> -->
			</view>
			<view :animation="animationM" class="img-style2" @click="navtoPublish(2)">
				<view
					style="background-color: #1a79ff; border-radius: 50%; width: 140upx; height: 140upx; color: #FFFFFF; display: flex; justify-content: center; align-items: center; box-shadow: 2px 2px 8px 2px #ccc;">
					我要招人</view>
				<!-- <view style="text-align:center;font-size:12px;margin-top:-10px;color:#8E51DB;">发视频</view> -->
			</view>
		</view>
		<!-- <u-mask :show="show" z-index='1'></u-mask> -->
	</view>
</template>

<script>
	export default {
		name: 'publish',
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				publishShow: true,
				isPopping: !0,
				animBack: {},
				animInput: {},
				animationM: {},
				iconStyle: {}
			};
		},
		watch: {
			show(e, v) {
				this.clickTab();
				console.log('77777&&&&&&&&&&&&&&&&&&&', e);
				console.log('%%%%%%%%%%%9', v);
			}
		},
		methods: {
			navtoPublish(type) {
				this.$emit('iconRotate', type)
				// this.$u.route("/pages/publish/publishText?type="+type)
			},
			clickTab() {
				!0 == this.isPopping ? (this.popp(), (this.isPopping = !1)) : !1 == this.isPopping && (this.takeback(), (
					this.isPopping = !0));
			},
			popp() {
				var animInput = wx.createAnimation({
						duration: 500,
						timingFunction: 'ease-out'
					}),
					animationM = wx.createAnimation({
						duration: 500,
						timingFunction: 'ease-out'
					}),
					animBack = wx.createAnimation({
						duration: 300,
						timingFunction: 'ease-out'
					});
				animInput
					.translate(-110, -100)
					.rotateZ(360)
					.opacity(1)
					.height('145rpx')
					.width('145rpx')
					.step();
				animationM
					.translate(130, -100)
					.rotateZ(360)
					.opacity(1)
					.height('145rpx')
					.width('145rpx')
					.step();
				animBack
					.backgroundColor('rgba(255,255,255,0.64)')
					.height('33vh')
					.step();
				this.animInput = animInput.export();
				this.animationM = animationM.export();
				this.animBack = animBack.export();
				this.iconStyle = {
					'transform': 'rotate(45deg)',
					'name': '/static/min_button_select.png'
				}
				this.$emit('iconRotate', this.iconStyle)
				// this.iconStyle = 'transform: rotate(45deg)';
			},
			takeback() {
				var animInput = wx.createAnimation({
						duration: 500,
						timingFunction: 'ease-out'
					}),
					animationM = wx.createAnimation({
						duration: 500,
						timingFunction: 'ease-out'
					}),
					animBack = wx.createAnimation({
						duration: 300,
						timingFunction: 'ease-out'
					});
				animInput
					.translate(0, 0)
					.rotateZ(0)
					.opacity(0)
					.height('0rpx')
					.width('0rpx')
					.step();
				animationM
					.translate(0, 0)
					.rotateZ(0)
					.opacity(0)
					.height('0rpx')
					.width('0rpx')
					.step();
				animBack
					.backgroundColor('transparent')
					.height(45)
					.step();
				this.animInput = animInput.export();
				this.animationM = animationM.export();
				this.animBack = animBack.export();
				this.iconStyle = {
					'transform': 'rotate(0deg)',
					'name': '/static/min_button.png'
				}
				this.$emit('iconRotate', this.iconStyle)
				// this.iconStyle = 'transform: rotate(0deg)';
			},
			changeTab(index) {
				this.clickTab();
			}
		}
	};
</script>


<style lang="scss" scoped>
	.tabbar_boo {
		// display: -webkit-box;
		// display: -webkit-flex;
		display: flex;
		position: fixed;
		z-index: 100;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 20rpx;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		/*background-color: rgba(255,255,255,0.64) !important;*/
		backdrop-filter: blur(10px);

	}

	.img-style {
		height: 0rpx;
		width: 0rpx;
		position: absolute;
		right: calc(50% - 100upx);
		opacity: 0;
		bottom: 0px;
	}

	.img-style2 {
		height: 0rpx;
		width: 0rpx;
		position: absolute;
		right: calc(50% - 20upx);
		opacity: 0;
		bottom: 0px;
	}
</style>
